<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="1200px" append-to-body
    >
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">

        <el-form-item>
          <el-date-picker
            v-model="dateRange"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table ref="deviceTable" v-loading="loading" :data="historyList">

        <el-table-column align="center" sortable label="消息时间">
          <template slot-scope="scope">
            {{ parseTime(scope.row.createTime) }}
          </template>
        </el-table-column>

        <el-table-column label="事件数据" show-overflow-tooltip align="center" prop="eventData">
          <template slot-scope="scope">
            {{scope.row}}
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="openDetails(scope.row)"
              v-hasPermi="['iot:protocol:edit']"
            >详情
            </el-button>
          </template>
        </el-table-column>

      </el-table>

      <!-- 表格分页 -->
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">关闭</el-button>
      </div>
    </el-dialog>

    <value-details ref="valueDetails"/>

  </div>
</template>

<script>

import ValueDetails from '@/views/iot/device/physical-model/valueDetails'
import { mapState } from 'vuex'
import { queryDeviceEvents } from '@/api/iot/device'

export default {
  name: 'EventsHistory',
  components: {
    ValueDetails
  },
  computed: {
    ...mapState({
      // 设备数据
      deviceId: state => state.device.deviceId
    })
  },
  watch: {
    open(state) {
      if (!state) {
        this.reset()
      }
    }
  },
  data() {
    return {
      //总条数
      total: 0,
      //弹出框
      open: null,
      //事件ID
      eventId: null,
      //事件历史集合
      historyList: null,
      //遮盖曾
      loading: null,
      // 日期范围
      dateRange: [],
      //搜索条件
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        terms: [],
        sorts: []
      },
      title: null
    }
  },
  methods: {
    getList() {
      this.setQueryParams();
      queryDeviceEvents(this.deviceId, this.eventId, this.queryParams).then(response => {
        this.historyList = response.data.data
        this.total = response.data.total
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
    },
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        terms: [],
        sorts: []
      }
      this.dateRange = []
    },
    resetQuery() {
      this.dateRange = [];
      this.queryParams.terms = [];
      this.queryParams.sorts = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleHistory(row) {
      this.title = '事件历史记录(' + row + ')'
      this.eventId = row
      this.open = true
      this.handleQuery(row)
    },
    handleQuery() {
      this.getList()
    },
    openDetails(row) {
      this.$refs.valueDetails.openDetails(row)
    },
    /** 设置查询参数 */
    setQueryParams() {

      this.queryParams.terms = [];
      this.queryParams.sorts = [];
      this.queryParams.pageIndex = this.queryParams.pageNum - 1;

      // 按时间排序（降序）
      this.queryParams.sorts.push({
        name: 'timestamp',
        order: 'desc'
      });

      if (this.dateRange && this.dateRange.length > 0) {
        this.queryParams.terms.push({
          column: 'timestamp$BTW',
          value: this.dateRange.join()
        });
      }
    },
  }
}
</script>

<style lang="scss" scoped>
</style>
